<script lang="ts" setup>
import { userInfoStorage, useUserStore } from '~/composables/store/user-store';
import { userApi } from '~/utils/api/user-api';

const userStore = useUserStore();
onMounted(() => {
	if (userInfoStorage.value) {
		const user = userInfoStorage.value;
		userStore.setUser(user);
	}
	else {
		// 获取用户信息
		userApi.getUserInfo().then((res) => {
			console.log(res);
			if (res.code === 200) {
				userStore.setUser({ userInfo: res.data });
			}
		}).catch((err) => {
			console.log(err._data.message);
		});
	}
});
</script>

<template>
	<div class="h-full">
		<NuxtLayout>
			<NuxtPage />
		</NuxtLayout>
		<Toaster />
		<BackTopBtn />
	</div>
</template>

<style>
.blur-enter-active,
.blur-leave-active {
  transition: all 0.4s;
}

.blur-enter-from,
.blur-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

html {
  height: 100%;
}

body {
  height: 100%;
}

#__nuxt {
  height: 100%;
}

.toTop {
  color: #fff;
  width: 0;
  height: 0;
  z-index: 9999;
  box-shadow: 0 2px 12px 8px rgba(164, 164, 164, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  transition: 0.4s;
}

.toTop:hover {
  opacity: 1;
}

.toTop.active {
  width: 2.25rem;
  height: 2.25rem;
}
</style>
